<template>
  <div class="container">
    <!-- 弹出框组件 -->
    <MyDilog
      @submitClick="handleSubmitClick"
      :formData="formData"
      :dialogTitle="dialogTitle"
      :isVisible="isVisible"
    ></MyDilog>

    <!-- 头部组件 -->
    <header class="header">
      <HeaderBar></HeaderBar>
    </header>

    <!-- <nav class="nav">
      <input type="text" v-model="inputValue" name="" id="" />
      <button @click="handleSearchClick">搜索</button>
    </nav> -->

    <!-- 导航搜索组件 -->
    <NavBar @searchClick="handleSearchClick" @watchClick="handleWatchClick"></NavBar>

    <!-- 列表组件 -->
    <main class="main">
      <GradeListItem @onEdit="handleEdit" @onRemove="handleRemove" :list="list"></GradeListItem>
    </main>

    <footer class="footer"></footer>
  </div>
</template>

<script>
import axios from 'axios'
import MyDilog from './components/Dialog.vue'
import HeaderBar from './components/HeaderBar.vue'
import NavBar from './components/NavBar.vue'
import GradeListItem from './components/GradeListItem.vue'
export default {
  components: {
    MyDilog,
    HeaderBar,
    NavBar,
    GradeListItem,
  },
  data() {
    return {
      page: 1,
      size: 10,
      inputValue: '',
      list: [],
      dialogTitle: '编辑',
      isVisible: false,
      formData: {
        name: '',
        address: '',
        grade: '',
      },
    }
  },
  created() {
    this.getData()
  },
  // 子组件内部的input框的值，在父组件监听不到了
  // watch: {
  //   inputValue(v) {
  //     if (!v) {
  //       // 当用户清空input框的值的时候，重新请求数据
  //       this.getData()
  //     }
  //   },
  // },
  methods: {
    // 编辑按钮，让当前弹出框出现，并且把表单的值赋值给弹出框的表单
    // 1. 拿到当前的这条数据 （如果用户有用户不想编辑的情况，怎么办？）
    handleEdit(item) {
      this.isVisible = true
      // 能不能给找个formData对象直接赋值
      this.formData = item
      console.log('item:', item)
    },
    // 删除-为什么不传下标？
    handleRemove(item) {
      this.list.splice(
        this.list.findIndex((v) => v.id === item.id),
        1
      )
    },
    // 提交按钮
    handleSubmitClick() {
      // 在提交按钮的时候，拿到更新后的数据，然后提交给后台，让后台去更新数据，
      console.log('拿到更新后的数据:', this.formData)
      this.isVisible = false
      console.log(this.isVisible, '是否显示')
    },
    /**
     * @name [navBar组件的逻辑]
     * @method handleSearchClick
     * @method handleWatchClick
     */
    // 搜索按钮
    handleSearchClick(value) {
      // console.log(this.inputValue, '搜索值')
      this.list = this.list.filter((v) => {
        if (v.name.includes(value)) {
          return v
        }
      })
    },
    // 如果input框的值为空的话，重新请求数据
    handleWatchClick() {
      this.getData()
    },
    /**
     * @name [数据请求]
     */
    async getData() {
      const res = await axios.get(`/api/list?_page=${this.page}&_limit=${this.size}`)
      this.list = res.data
    },
  },
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}

.dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    opacity: 0.6;
  }
  .dialog-content {
    width: 60%;
    padding: 20px;
    max-height: 60%;
    // height: 60%;
    background: #fff;
    z-index: 10;
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  // height: 50px;
}
.main {
  flex: 1;
  overflow: auto;
  .main-content {
    .main-content-item {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 5px;
      span {
        padding: 5px 10px;
        margin: 5px;
        font-size: 25px;
      }
      .edit,
      .remove {
        background: rgb(237, 36, 9);
        border-radius: 5px;
        color: #fff;
        // padding: 5px 10px;
        // margin: 3px;
        // font-size: 25px;
      }
    }
  }
}
.footer {
  background: orange;
  height: 50px;
}

.movie-header {
  display: flex;
  span {
    padding: 5px 10px;
    margin: 5px;
    background: lightcoral;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    background: red;
    color: gold;
  }
}
</style>
